<!DOCTYPE html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <title>厅干部平时考核管理系统</title>
    <link rel="stylesheet" type="text/css" href="<c:url value='/resource/jxkh/css/main.css'/>"/>
    <script type="text/javascript" src="<c:url value='/resource/jxkh/js/jquery-1.11.0.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/resource/jxkh/js/echarts.min.js'/>"></script>
</head>
<body>

<div class="njga" style="overflow: auto;">
    <div class="bmkhcp" >
        <div class="bmkhcp_row">
            <div class="bmkhcp_lf" style="width: 100%;height: 100%;padding: 20px;background: #eee;">
                <div class="tongj" id="tongj" style="height:500px;">
                    <div class="tongj_row_lf" id="tongj_row_lf">
                        <div id="jnzs" style="width: 100%;height: 100%;"></div>
                    </div>
                    <div class="tongj_row_rt" id="tongj_row_rt">
                        <div id="bt" style="width: 100%;height: 100%;"></div>
                    </div>
                    <div class="tongj_row_lf1" id="tongj_row_lf1">
                        <div id="jsn" style="width: 100%;height: 100%;"></div>
                    </div>
                    <div class="tongj_row_rt1" id="tongj_row_rt1">
                        <div id="bmpjf" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<%--<div class="njga" >
    <div class="bmkhcp">
        <div class="bmkhcp_row">
            <div class="bmkhcp_lf" style="width: 100%; height: 100%;">

            </div>
        </div>

    </div>
</div>--%>

<!--折线图结束-->
<script type="text/javascript">

    function getContentSize() {
        var ww = document.getElementById("tongj").offsetWidth;
        var wh = document.getElementById("tongj").offsetHeight;
        var ew = document.getElementById("tongj_row_lf").offsetWidth;
        var eh = document.getElementById("tongj_row_lf").offsetHeight;
        cw = (ww - ew -24) + "px";
        ch = (wh - eh -24) + "px";
        document.getElementById("tongj_row_rt").style.width = cw;
        document.getElementById("tongj_row_lf1").style.height = ch;
        document.getElementById("tongj_row_rt1").style.width = cw;
        document.getElementById("tongj_row_rt1").style.height = ch;
    }

$(function(){
    getContentSize();
    window.onresize = getContentSize; //当改变窗口大小时会出发getContentSize()
    initEcharts();
});
    function initEcharts(){
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('jnzs'));
        option1 = {
            title: {
                text: '2017年个人成绩走势'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}分"
            },
            legend: {
                data:['2017年']
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 分'
                }
            },
            series: [
                {
                    name:'2017年',
                    type:'line',
                    data:[84, 92, 92, 90, 93, 90, 100,95,87,95,89,100],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);


        //近三年
        var myChart = echarts.init(document.getElementById('jsn'));
        option = {
            title: {
                text: '近三年个人成绩走势'
            },
            tooltip: {
                trigger: 'axis',
                formatter: "{a} <br/>{b} : {c}分"
            },
            legend: {
                data:['2015年','2016年','2017年']
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 分'
                }
            },
            series: [
                {
                    name:'2015年',
                    type:'line',
                    data:[40, 88, 92, 60, 95, 90, 72,81,92,97,100,96],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'2016年',
                    type:'line',
                    data:[82, 70, 82, 85, 90, 66, 73,84,78,50,82,88],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'2017年',
                    type:'line',
                    data:[84, 92, 92, 90, 93, 90, 100,95,87,95,89,100],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);


        //饼图
        var myChart2 = echarts.init(document.getElementById('bt'));
        option2 = {
            title : {
                text: '2017年成绩等次分布',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}人({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['优','良','中','差']
            },
            series : [
                {
                    name: '成绩分布',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:7854, name:'优'},
                        {value:866, name:'良'},
                        {value:234, name:'中'},
                        {value:135, name:'差'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);



        //近三年
        var myChart3 = echarts.init(document.getElementById('bmpjf'));
        option3 = {
            title: {
                text: '2017年10月各科室平均分',
                y: '0px',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'normal', //标题颜色
                    color: '#000'
                },
            },
            color: ['#3398DB'],
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}分"
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['科室1', '科室2', '科室3', '科室4', '科室5', '科室6', '科室7'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'2017年10月平均分',
                    type:'bar',
                    barWidth: '60%',
                    data:[78.4, 82.5, 88, 75.3, 92, 84.5, 86.9]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option3);
    }
</script>
</body>

</html>